<template>

<!-- 原生事件中， $event 表示事件对象 -->
<!-- 在自定义事件中 $event 表示子传父 的数据 -->
<!-- Vue2 中的 .sync 其实就是注册了自定义事件 @update:count="count=$event"  -->
<!-- 在 Vue3 中， v-model:count="count" 其实就是 Vue2的 :count.sync-->
  <!-- <MyNumber :count="count" @update:count="count=$event" /> -->
  <MyNumber v-model="count"  /><!-- 这行代码就是以下代码的简写 -->
  <MyNumber v-model:modelValue="count"  />
  <MyNumber :modelValue="count" @update:modelValue="modelValue=$event" />

</template>

<script>
import { ref } from 'vue'
import MyNumber from './components/MyNumber.vue'
export default {
  components: { MyNumber },
  setup () {
    const count = ref(0)
    return { count }
  }
}
</script>

<style>

</style>
